<template>
	<view class="">
		<view class="flex pd40">
			<view class="flex column aic">
				<vxe-toolbar :refresh="{ queryMethod: searchMethod }">
					<template #buttons>
						<vxe-button @click="expandAllTreeEvent">展开所有</vxe-button>
						<!-- <vxe-button @click="claseExpandTreeEvent" class="mgr40">关闭所有展开</vxe-button> -->
						<vxe-button @click="openExportEvent" class="mgr40">导出</vxe-button>
					</template>
				</vxe-toolbar>
				<view class="tableBox">
					<vxe-table
						ref="tableRef"
						border="full"
						sync-resize
						:loading="loading"
						height="530"
						:column-config="{ resizable: true }"
						:export-config="{}"
						:tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', expandAll: true, border: 'full' }"
						:data="tableData"
						:checkbox-config="{ labelField: 'id', highlight: true }"
						@checkbox-change="selectChangeEvent"
						@checkbox-all="selectChangeEvent"
					>
						<vxe-column type="checkbox" :width="widthh">
							<template #default="{ row }"></template>
						</vxe-column>
						<vxe-column title="栏目" tree-node min-width="200">
							<template #header="{ row }">
								<view class="flex">
									<view class="mgr40">栏目</view>
									<match-media :min-width="500">
										<van-radio-group v-model="team.rodio" class="flex aic fs24 radioGroup" shape="dot">
											<van-radio name="1" icon-size="14px" class="radio"><text>所有待解决1/10</text></van-radio>
											<span>|</span>
											<van-radio name="2" icon-size="14px" class="radio"><text>今天待解决1/10</text></van-radio>
											<span>|</span>
											<van-radio name="3" icon-size="14px" class="radio"><text>今天完成</text></van-radio>
										</van-radio-group>
										<!-- <view class="cr">所有待解决1/10 | 今天待解决 | 今天完成</view> -->
									</match-media>
								</view>
							</template>
							<template #default="{ row }">
								<view class="flex jcsb">
									<view class="" @click="showIframe = row.url">{{ row.name }}</view>
									<view class="">
										<view class="" v-if="row.caozuo == 0">
											<van-icon name="add" @click="openModel(row, 1)" size="20" />
										</view>
										<view class="" v-if="row.caozuo == 1">
											<van-icon name="add" @click="openModel(row, 2)" size="20" />
										</view>
										<view class="" v-if="row.caozuo == 2">
											<van-icon name="add" @click="openModel(row, 3)" size="20" />
										</view>
									</view>
								</view>
							</template>
						</vxe-column>
						<vxe-column field="caozuo" title="操作" min-width="30">
							<template #default="{ row }">
								<view style="position: relative">
									<match-media :max-width="375">
										<van-icon name="other-pay" v-if="row.caozuo == 3" @click="showOperate[row.id - 1] = !showOperate[row.id - 1]" size="25" />
									</match-media>
									<transition name="van-fade">
										<view class="operate" v-if="showselect(row)">
											<vxe-button type="text" @click="qaCliCK(row)" class="seeBtn">查看</vxe-button>
											<!-- 工作组 -->
											<view class="btnGroup" v-if="myInfo.roles == 0 && !getIn(row, 'states')">
												<vxe-button type="text" @click="openupDateModel(row, 0)" v-if="!getIn(row, 'gman')" class="opBtn">跟进</vxe-button>
												<vxe-button type="text" @click="openupDateModel(row, 1)" v-if="getIn(row, 'gman')" class="opBtn">转交</vxe-button>
												<vxe-button type="text" @click="openupDateModel(row, 2)" v-if="getIn(row, 'gman')" class="opBtn">协同</vxe-button>
												<vxe-button type="text" @click="openupDateModel(row, 3)" v-if="getIn(row, 'gman')" class="opBtn">完成</vxe-button>
											</view>
											<!-- 项目经理 -->
											<view class="btnGroup" v-else-if="myInfo.roles == 1">
												<vxe-button type="text" class="opBtn">返修</vxe-button>
												<vxe-button type="text" @click="openupDateModel(row, 2)" class="opBtn">指派</vxe-button>
												<vxe-button type="text" class="opBtn">合格</vxe-button>
											</view>
											<!-- 甲方 -->
											<view class="btnGroup" v-else-if="myInfo.roles == 2">
												<vxe-button type="text" class="opBtn">返修</vxe-button>
												<vxe-button type="text" class="opBtn">验收</vxe-button>
											</view>
										</view>
									</transition>
								</view>
							</template>
						</vxe-column>
						<vxe-column field="fman" title="发起人" width="100"></vxe-column>
						<vxe-column field="gman" title="跟进人" width="120">
							<template #default="{ row }">
								<view class="flex column" v-for="i in row.gman">
									<view class="">
										<text v-if="i.position">{{ i.position }}:</text>
										{{ i.name }}
									</view>
								</view>
							</template>
						</vxe-column>
						<vxe-column field="state" title="状态" width="100">
							<template #default="{ row }">
								<view class="" v-if="row.caozuo == 3">
									<view class="" v-if="getIn(row, 'states')">完成</view>
									<view class="" v-else>未完成</view>
								</view>
								<view class="" v-else>
									{{ getStates(row) ? '完成' : '未完成' }}
								</view>
							</template>
						</vxe-column>
					</vxe-table>

					<vxe-pager perfect :layouts="[]" align="left">
						<template #left>
							<view class="">
								<span class="page-left">
									<vxe-button @click="addAllList">快速添加</vxe-button>
									<!-- 工作组 -->
									<vxe-button size="small">
										<template #default>批量操作</template>
										<template #dropdowns>
											<view class="" v-if="myInfo.roles == 0">
												<vxe-button type="text" @click="allTool(0)">跟进</vxe-button>
												<vxe-button type="text" @click="allTool(1)">转交</vxe-button>
												<vxe-button type="text" @click="allTool(2)">协同</vxe-button>
												<vxe-button type="text" @click="allTool(3)">完成</vxe-button>
											</view>
											<!-- 项目经理 -->
											<view class="" v-else-if="myInfo.roles == 1">
												<vxe-button type="text">返修</vxe-button>
												<vxe-button type="text">指派</vxe-button>
												<vxe-button type="text">合格</vxe-button>
											</view>
											<!-- 甲方 -->
											<view class="" v-else-if="myInfo.roles == 2">
												<vxe-button type="text">返修</vxe-button>
												<vxe-button type="text">验收</vxe-button>
											</view>
										</template>
									</vxe-button>
								</span>
							</view>
						</template>
					</vxe-pager>
				</view>
				<!-- 添加 -->
				<van-popup v-model:show="addModel" round>
					<view class="mgt20 pd20">
						<view class="inputGroup">
							<view v-if="addType == 0">
								<view class="">
									<view>添加栏目</view>
									<vxe-input v-model="team.lanName" placeholder="栏目名称"></vxe-input>
								</view>
							</view>
							<view v-if="addType == 1">
								<view class="fs28">添加页面</view>
								<vxe-input v-model="team.pagename" placeholder="页面名称"></vxe-input>
							</view>
							<view v-if="addType == 2">
								<view class="fs28">添加位置</view>
								<vxe-input v-model="team.positionName" placeholder="位置名称"></vxe-input>
							</view>
						</view>
						<view class="qa">
							<view v-if="addType == 3">
								<view>问题</view>
								<vxe-textarea v-model="team.quesion" placeholder="问题" rows="7"></vxe-textarea>
							</view>
						</view>
					</view>
					<view class="flex jce">
						<vxe-button status="primary" @click="confirmEvent" class="btnCk">确定</vxe-button>
					</view>
				</van-popup>
				<!-- 修改 -->
				<van-popup v-model:show="updateModel" round>
					<view class="pd40" style="min-width: 300rpx">
						<view class="">
							<view v-if="useType == 0">
								<view class="">您正在跟进{{ tool.name }}位置的信息</view>
							</view>
							<view v-else-if="useType == 3">
								<view class="">已完成</view>
							</view>
							<view class="" style="height: 160px" v-else>
								<view v-if="useType == 1" class="flex aic jcc">
									<view class="mgr20">转交</view>
									<vxe-select v-model="team.gman" placeholder="  -------请选择-------">
										<vxe-option v-for="num in tgList" :key="num" :value="num" :label="`${num.position}-${num.name}`"></vxe-option>
									</vxe-select>
								</view>
								<view v-else class="flex aic jcc">
									<view class="mgr20">协同</view>
									<vxe-select v-model="team.xtgman" placeholder="  -------请选择-------" multiple multi-char-overflow>
										<vxe-option v-for="num in tgList" :key="num" :value="num" :label="`${num.position}-${num.name}`"></vxe-option>
									</vxe-select>
								</view>
							</view>
						</view>
						<view class="flex jce mgt40">
							<vxe-button status="primary" @click="innerCenter">确定</vxe-button>
						</view>
					</view>
				</van-popup>
			</view>
			<transition name="van-slide-right">
				<iframe id="iframe" :src="showIframe" frameborder="0" width="300px" height="600px" class="mgt80 dc3"></iframe>
			</transition>
		</view>
		<qa :roles="myInfo.roles" ref="showQa" />
	</view>
</template>

<script setup>
import { ref, reactive, computed, nextTick, onMounted } from 'vue';
import { VXETable } from 'vxe-table';
import qa from '../../components/functionModule/qa.vue';

const widthh = ref(40);

const loading = ref(false);
const tableRef = ref();
let tableData = ref([]);
const findList = () => {
	loading.value = true;
	return new Promise((resolve) => {
		setTimeout(() => {
			tableData.value = [
				{ id: 1, parentId: null, name: '栏目名字', caozuo: 0, url: 'https://www.jiaja.cn/h5/h5.html#/', states: [], createdDate: '2023-2-2' },
				{ id: 2, parentId: 1, name: '页面名字', caozuo: 1, states: [], url: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
				{
					id: 3,
					parentId: 2,
					name: '位置名',
					caozuo: 2,
					states: []
				},
				{
					id: 4,
					parentId: 3,
					name: '问题:吃没吃',
					caozuo: 3,
					fman: '用户A',
					gman: [
						{ name: 'me', position: '前端' },
						{ name: '用户B', position: '前端' },
						{ name: '用户c', position: '前端' }
					],
					states: []
				}
				// { id: 5, parentId: 4, name: '没', caozuo: 4, fman: '用户A', gman: '用户B' }
			];
			tableData.value.map((i, index) => {
				showOperate[index] = true;
			});
			loading.value = false;
			resolve(null);
		}, 300);
	});
};
const searchMethod = () => {
	const $table = tableRef.value;
	if ($table) {
		// 清除所有状态
		$table.clearAll();
		return findList();
	}
	return Promise.resolve();
};
const width = ref('');
const showIframe = ref('');
// 可以协同的角色
const tgList = [
	{ name: '啪啪啪', position: '后端' },
	{ name: '哦哦哦', position: '前端' },
	// { name: 'me', position: '前端' },
	{ name: '啦啦啦', position: 'UI' }
];
// 个人信息
let myInfo = { name: 'me', position: '前端', roles: 0 };
//小屏显示
const showOperate = reactive([]);
const showselect = computed(() => {
	if (width.value > 375) {
		return function (row) {
			return row.caozuo == 3 && showOperate[row.id - 1];
		};
	} else {
		return function (row) {
			return row.caozuo == 3 && !showOperate[row.id - 1];
		};
	}
});
//本人是否在存在
function getIn(row, tip) {
	if (row[tip]) {
		return row[tip].filter((i) => i.name == myInfo.name).length > 0;
	} else {
		return;
	}
}
//冒泡
function getStates(row) {
	let length = tableData.value.filter((i) => i.parentId == row.id).length;
	// console.log(row.states);
	return row.states.length == length;
}
// 全选
const isAllChecked = ref(false);
const isIndeterminate = ref(false);
const selectRecords = ref([]);
const selectChangeEvent = () => {
	const $table = tableRef.value;
	if ($table) {
		isAllChecked.value = $table.isAllCheckboxChecked();
		isIndeterminate.value = $table.isAllCheckboxIndeterminate();
		selectRecords.value = $table.getCheckboxRecords();
		// console.log(isAllChecked.value, isIndeterminate.value, selectRecords.value);
	}
};

// 展开所有
function expandAllTreeEvent() {
	const $table = tableRef.value;
	if ($table) {
		$table.setAllTreeExpand(true);
	}
}
// 关闭所有
function claseExpandTreeEvent() {
	const $table = tableRef.value;
	if ($table) {
		$table.clearTreeExpand();
	}
}
//表单显示处理 0 新增栏目 1 新增页面 2 添加位置 3 添加问题
let addType = ref(0);
//当前选择单元格
let tool = reactive({});
//添加表单信息
let team = reactive({});
//弹框
let addModel = ref();
//问答弹框
let qaShow = ref();
//打开弹框
const openModel = (row, tip) => {
	team = reactive({});
	tool = row;
	addType.value = tip;
	addModel.value = true;
};
//确定
const confirmEvent = async () => {
	addModel.value = false;
	addLine();
};
// 新增函数
async function addLine() {
	const $table = tableRef.value;
	const xdata = $table.getTableData().tableData;
	//表单显示处理 0 新增栏目 1 新增页面 2 添加位置 3 添加问题 4查看问题
	let upLoadData = [
		{
			name: '',
			id: xdata.length + 1,
			caozuo: addType.value,
			parentId: tool.id,
			states: []
		}
	];
	if ($table) {
		switch (addType.value) {
			case 0:
				if (team.lanname) {
					upLoadData[0].name = team.lanname;
					upLoadData[0].parentId = null;
					tableData.value = [...tableData.value, ...upLoadData];
					tool = upLoadData[0];
				}
			case 1:
				if (team.pagename) {
					upLoadData[0].name = team.pagename;
					tableData.value = [...tableData.value, ...upLoadData];
					tool = upLoadData[0];
				}
			case 2:
				if (team.positionName) {
					upLoadData[0].name = team.positionName;
					tableData.value = [...tableData.value, ...upLoadData];
					tool = upLoadData[0];
				}
			case 3:
				if (team.quesion) {
					upLoadData[0].name = team.quesion;
					upLoadData[0].fman = myInfo.name;
					// upLoadData[0].states = [];
					tableData.value = [...tableData.value, ...upLoadData];
					tableData.value.map((i, index) => {
						showOperate[index] = true;
					});
				}
				break;
			case 4:
				qaShow = true;
				break;
		}
	}

	setTimeout(() => {
		expandAllTreeEvent();
	}, 100);
	// console.log(tableData.value);
}

// 打开
function addAllList() {
	uni.navigateTo({
		url: '/pages/from/createdPage'
	});
}
//修改
//操作处理 0 跟进 1 转交 2 协同 3 完成
let useType = ref(0);
let updateModel = ref();
let showOp = computed(() => {
	return useType.value == 1 || useType.value == 2;
});
let openupDateModel = (row, tip) => {
	team = reactive({});
	if (width.value <= 400) {
		showOperate[row.id - 1] = true;
	}
	tool = row;
	useType.value = tip;
	updateModel.value = true;
};

function getInGman(row, people) {
	if (row.gman) {
		return row.gman.filter((i) => i.name == people.name).length > 0;
	} else {
		return;
	}
}

// 修改参数
function updateTable(data, name) {
	const $table = tableRef.value;
	const xdata = $table.getTableData().tableData;
	if (!xdata[tool.id - 1].name) {
		xdata[tool.id - 1].name = data;
	} else {
	}
	xdata[tool.id - 1].name = data;
	$table.setTableData(xdata);
}

// 中转函数,处理是否多选
let isAllcK = ref(false);
function innerCenter() {
	if (!isAllcK.value) {
		updateok();
	} else {
		let toolData = selectRecords.value.filter((i) => i.caozuo == 3);
		toolData.map((i) => {
			if (getIn(i, 'gman')) {
				tool = i;
				updateok();
			} else {
				uni.showToast({
					title: '存在未跟进项目,请重试!',
					icon: 'none'
				});
			}
		});
		isAllcK.value = false;
	}
}
//处理完成状态
function treeStates() {
	//第一层
	let pid = tableData.value[tool.id - 1].parentId;
	let list = tableData.value[pid - 1].states.push('ok');
	//第二层
	if (getStates(tableData.value[pid - 1])) {
		pid = tableData.value[pid - 1].parentId;
		list = tableData.value[pid - 1].states.push('ok');
	}
	//第三层
	if (getStates(tableData.value[pid - 1])) {
		pid = tableData.value[pid - 1].parentId;
		list = tableData.value[pid - 1].states.push('ok');
	}
}
//修改
function updateok() {
	updateModel.value = false;
	const $table = tableRef.value;
	const xdata = $table.getTableData().tableData;

	switch (useType.value) {
		// 0 跟进 1 转交 2 协同 3 完成
		case 0:
			if (!tool.gman) {
				tableData.value[tool.id - 1].gman = [myInfo];
			} else {
				if (tableData.value[tool.id - 1].gman) {
					tableData.value[tool.id - 1].gman.push(myInfo);
				}
			}
			const { insertRecords, removeRecords, updateRecords } = $table.getRecordset();
			break;
		case 1:
			if (getInGman(tool, team.gman)) {
				uni.showToast({
					title: '该名同事已经跟进该位置!',
					icon: 'none'
				});
				return;
			} else {
				let old = tableData.value[tool.id - 1].gman;

				old.map((i, index) => {
					// console.log(i);
					if (i.name == myInfo.name) {
						tableData.value[tool.id - 1].gman[index] = team.gman;
					}
				});
			}
			break;
		case 2:
			let flag = team.xtgman.some((i) => getInGman(tool, i));
			if (flag) {
				uni.showToast({
					title: '选项存在重复,请重试!',
					icon: 'none'
				});
			} else {
				tableData.value[tool.id - 1].gman = [...tableData.value[tool.id - 1].gman, ...team.xtgman];
			}
			break;
		case 3:
			tableData.value[tool.id - 1].states.push(myInfo);
			treeStates();
			break;
	}
}

//问答窗口
// let rowData = reactive({});
let showQa = ref();

function qaCliCK(row) {
	if (width.value <= 400) {
		showOperate[row.id - 1] = true;
	}
	showQa.value.show = true;
	// showQa.value.change(row);
}
// 导出
const openExportEvent = () => {
	const $table = tableRef.value;
	if ($table) {
		$table.openExport();
	}
};
const addMore = ref(false);
// 批量处理操作
async function allTool(tip) {
	useType.value = tip;
	let doTool = selectRecords.value.filter((i) => i.caozuo == 3);
	isAllcK.value = true;
	// 0 跟进 1 转交 2 协同 3 完成
	if (doTool.length > 0) {
		if (tip == 0) {
			doTool.map((i) => {
				tool = i;
				if (!getInGman(i, myInfo)) {
					updateok();
				} else {
					uni.showToast({
						title: '选项存在重复,请重试!',
						icon: 'none'
					});
				}
			});
		} else {
			team = reactive({});
			updateModel.value = true;
		}
	}
	isAllcK.value = false;
}

const showIf = ref(true);
function hideLine() {
	const $table = tableRef.value;
	showIf.value = false;
	if ($table) {
		setTimeout(() => {
			// $table.hideColumn('caozuo');
			$table.hideColumn('fman');
			$table.hideColumn('gman');
			$table.hideColumn('state');
		}, 50);
	}
}
function showColEvent() {
	const $table = tableRef.value;
	if ($table) {
		$table.showColumn('caozuo');
		$table.showColumn('fman');
		$table.showColumn('gman');
		$table.showColumn('state');
	}
}
//检测屏幕大小

onMounted(() => {
	setTimeout(() => {
		findList();
	}, 50);
	// 获取屏幕宽度
	width.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	if (width.value > 500) {
		showColEvent();
	} else {
		hideLine();
		showOperate.value = false;
	}
});
</script>

<style lang="scss">
.tableBox {
	width: 1024px;
}
.operate {
	display: flex;
	.seeBtn {
		padding: 5rpx;
		margin-top: 20rpx;
		color: #fff;
		background-color: green;
		margin-right: 10rpx;
	}
	.btnGroup {
		display: flex;
		.opBtn {
			@extend .seeBtn;
			&:nth-child(1) {
				background-color: red;
			}
			&:nth-child(2) {
				background-color: blue;
			}
			&:nth-child(3) {
				background-color: pink;
			}
		}
	}
}
.radioGroup {
	.radio {
		text {
			font-size: 12px;
		}
	}
	span {
		margin: 0 10rpx;
	}
}
.inputGroup {
	width: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	view {
		width: 300px;
		// border: 1px solid red;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		view {
			margin-right: 20rpx;
			width: 120rpx;
		}
	}
}
.qa {
	display: flex;
	flex-direction: column;
	view {
		margin-bottom: 20rpx;
	}
	// align-items: center;
}
.btnCk {
	margin: 40rpx 20rpx;
}
/* 隐藏滚动条 */
template::-webkit-scrollbar {
	display: none;
}

/* 保留滚动功能 */
template {
	-ms-overflow-style: none; /* IE 和 Edge */
	scrollbar-width: none; /* Firefox */
}
@media (max-width: 400px) {
	.tableBox {
		width: 334px;
	}
	.inputGroup {
		width: 300px;
		view {
			width: 240px;
		}
	}
	.operate {
		position: absolute;
		z-index: 10000;
		background-color: #efefef;
		padding: 10rpx;
		right: 0rpx;
		flex-direction: column;
		.seeBtn {
			padding: 0 21rpx;
			margin-right: 0;
			color: #000;
			background-color: unset;
			border-bottom: 1px solid #fff;
		}
		.btnGroup {
			display: flex;
			flex-direction: column;
			.opBtn {
				@extend .seeBtn;
				&:nth-child(n) {
					background-color: unset;
				}
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
	.dc3 {
		display: none;
	}
}

// ::v-deep(.mytable-style.vxe-table .vxe-body--row.row--level-0) {
// 	background-color: #187;
// 	color: #fff;
// }
</style>
